import React, { Component } from 'react'
import './NewShare.scss'
import { Toast } from 'antd-mobile';
import Img from '../../assets/images/fx.webp'
import Axios from 'axios';

export default class NewShare extends Component {
    constructor(props) {
        super(props)
        this.state = { newShareList: [] }
    }

    // 获取新人分享得数据
    componentDidMount() {
        Axios.get('./json/NewShare.json').then(res => {
            Toast.loading('Loading...', 1,null)
            let newShareList = res.data.data.wall.docs
            this.setState({ newShareList })
        })
        Toast.hide();
    }
    //点击领优惠卷
    handClick = () => {
        Toast.info('你不能领取此优惠卷', 1)
    }
    // 跳转详情页面
    goNewDetail=(id)=>{
        this.props.history.push('/details/'+id)
    }
    render() {
        return (
            <div className='moj-newShare' >
                {/* 新人专享好礼开始 */}
                <i className='iconfont icon-buoumaotubiao09 fh' onClick={()=>{
                        this.props.history.go(-1)
                    }}></i>
                <div className="mgj-mewShare-top" onClick={this.handClick}>
                    
                    <img src={Img} alt="" />
                </div>
                {/* 新人专享好礼结束 */}
                {/* 商品列表开始 */}
                <div className="mgj-share-lists" ref={this.goodsRef}>
                    {this.state.newShareList&&this.state.newShareList.map((v, i) => {
                        return (
                            <div className="mgj-share-lists-item" key={v.iid} onClick={this.goNewDetail.bind(this,v.iid)}>
                                <div className='share-lists-img'>
                                    <div className='share-lists-lazy'>
                                        <img src={v.img} alt="" />
                                    </div>
                                    <span className='bo_pv'>已售{v.sale}件</span>
                                </div>
                                <div className='share-lists-info'>
                                    <p className="lists-info-title">{v.title}</p>
                                    <div className='lists-info-price'>
                                        <div className='new-price'>新人价</div>
                                        <div className='new-peices'>￥{v.price}</div>
                                    </div>
                                    <div className='lists-info-btn'>立即抢购</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                {/* 商品列表结束 */}
            </div>
        )
    }
}
